<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .banner {
            width: 800px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid #000;
            position: relative;
        }
        .banner .screen {
            width: 800px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        .banner .screen ul {
            position: absolute;
            width: 4800px;
            height: 500px;
        }
        .banner .screen ul li {
            float: left;
        }
        .banner .screen ol {
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translate(-50%,0)
        }
        .banner .screen ol li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: skyblue;
            margin-right: 5px;
            text-align: center;
            line-height: 20px;
        }
        .arr {
            display: none;
        }
        .arr .left {
            position:absolute;
            left: 10px;
            top: 40%;
        }
        .arr .right {
            position: absolute;
            right: 10px;
            top: 40%;
        }
        
    </style>
</head>
<body>
    <div class="banner">
        <div class="screen">
            <ul>
                <li><a href="javascript:;"><img src="slidepic1.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="slidepic2.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="slidepic3.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="slidepic4.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="slidepic5.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="slidepic1.jpg" alt=""></a></li>
            </ul>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <div class="arr">
            <div class="left"><a href="javascript:void(0)"><img src="prev.png" alt=""></a></div>
            <div class="right"><a href="javascript:void(0)"><img src="next.png" alt=""></a></div>
        </div>
    </div>
    <script src='../common.js'></script>
    <script>
        //获取元素
        var banner = document.getElementsByClassName('banner')[0];
        var screen = document.getElementsByClassName('screen')[0];
        var arr = document.getElementsByClassName('arr')[0];
        var ul = screen.children[0];
        var ol = screen.children[1];
        var left = arr.children[0];
        var right = arr.children[1];

        //注册事件
        var index = 0; //标注图片显示的下标
        // 1,移入banner出现左右箭头
        banner.onmouseover = function() {
            arr.style.display = 'block';
            clearInterval(timeID);
        }
        // 2,移出banner左右箭头消失
        banner.onmouseout = function() {
            arr.style.display = 'none';
            timeID = setInterval(function(){
                right.click();
            },2000)
        }
        // 3,点击右箭头切换图片
        right.onclick = function() {
            if(index == ul.children.length-1) {
                ul.style.left = '0px';
                index = 0;
            }
            index++;
            animationAll(ul,{left:-index*screen.offsetWidth});
        }
        // 4,点击左箭头切换图片
        left.onclick = function() {
            if(index == 0) {
                ul.style.left = -(ul.offsetWidth-screen.offsetWidth) + 'px';
                index = ul.children.length - 1;
            }
            index--;
            animationAll(ul,{left:-index*screen.offsetWidth})
        }
        // 5,点击序号切换到对应图片
        for(var i = 0; i < ol.children.length; i++) {
            var li = ol.children[i];
            li.setAttribute('index',i);
            li.onclick = function() {
                if(-ul.offsetLeft == ul.offsetWidth-screen.offsetWidth) {
                    ul.style.left = '0px';
                }
                index = parseInt(this.getAttribute('index'));
                animationAll(ul,{left:-index*screen.offsetWidth})
            }
        }
        var timeID = setInterval(function(){
            right.click();
        },2000);
        
    </script>
</body>
</html>